<template>
	<view class="wrapper">
		<!-- #ifndef MP-WEIXIN -->
		<navBar :title="`搜索：${keyWord}`"></navBar>
		<!-- #endif -->
		<!-- 瀑布流 -->
		<u-waterfall v-if="renderList.length != 0" :value="renderList" ref="waterfall" class="waterfall">
			<template v-slot:left="{ leftList }">
				<view @click="toShowDetail(item)" class="water_item" v-for="(item, idx) in leftList" :key="idx">
					<view class="imgBox"><image :src="item.cover" mode="widthFix"></image></view>
					<view class="title">{{ item.title }}</view>
					<view class="publisher">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="2">
								<view class="demo-layout bg-purple left">
									<u--image
										:src="item.userAvatar || '../../static/logo.png'"
										shape="circle"
										width="5vw"
										height="5vw"
									></u--image>
								</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple-light">{{ item.userName }}</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple-dark right">浏览{{ item.read_count }}次</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view @click="toShowDetail(item)" class="water_item" v-for="(item, idx) in rightList" :key="idx">
					<view class="imgBox"><image :src="item.cover" mode="widthFix"></image></view>
					<view class="title">{{ item.title }}</view>
					<view class="publisher">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="2">
								<view class="demo-layout bg-purple left">
									<u--image
										:src="item.userAvatar || '../../static/logo.png'"
										shape="circle"
										width="5vw"
										height="5vw"
									></u--image>
								</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple-light">{{ item.userName }}</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple-dark right">浏览{{ item.read_count }}次</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-empty mode="search" v-else></u-empty>
	</view>
</template>

<script>
import { searchBlogs } from '@/config/api.js';
export default {
	data() {
		return {
			keyWord: '',
			// 渲染结构的列表
			renderList: []
		};
	},
	onLoad(e) {
		this.keyWord = e.keyword;
		// #ifdef MP-WEIXIN
		uni.setNavigationBarTitle({
			title: `搜索：${this.keyWord}`
		});
		// #endif
		this.searchBlogsByWord();
	},
	methods: {
		// 搜索博客
		async searchBlogsByWord() {
			// #ifndef MP-WEIXIN
			const res = await searchBlogs(this.keyWord);
			this.renderList = res;
			console.log(res);
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: 'https://eggblog.bluej.cn/api/blog/searchByInput',
				method: 'GET',
				data: {
					keyword: this.keyWord,
					projectId: 155
				},
				success: res => {
					console.log(res);
					this.renderList = res.data.data;
				}
			});
			// #endif
		},
		// 跳转内容详情页,携带博客id
		toShowDetail(item) {
			uni.navigateTo({
				url: `/subpages/detail/detail?blogid=${item.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100vh;
	.waterfall {
		margin-top: 1vh;
	}
	.water_item {
		box-sizing: border-box;
		overflow: hidden;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		margin: 0 auto 3vw;
		border-radius: 3vw;
		padding: 1.8vw 1.8vw 0;
		width: 94%;
		.imgBox {
			overflow: hidden;
			image {
				width: 100%;
				border-radius: 1.8vw;
			}
		}
		.publisher {
			.left {
				margin-left: 2vw;
				width: 5vw;
				height: 5vw;
			}
			.right {
				font-size: 14px;
				color: #666;
				text-align: center;
			}
			.bg-purple-light {
				width: 18vw;
				overflow: hidden;
			}
		}
		.title {
			width: 42vw;
			margin: 1vw auto 1.5vw;
		}
	}
	::v-deep .u-empty {
		margin-top: 5vh !important;
	}
}
</style>
